<template>
    <div class="extensionorder">
      <div class="accorder_input">
        <input type="text" placeholder="请输入订单信息"  v-model="searchtxt">
        <span @click="search">搜索</span>
      </div>
      <scroll class="wrapper" :data="extensionorderlist" :pullup="pullup" :pulldown="pulldown" @pulldown="loadData"  @pullup="nextpage">
        <div v-if="haveorno == 1">
          <ExtensionOrderList :extensionorderlist="extensionorderlist" ></ExtensionOrderList>
          <PageTip :tipshow="tipshow" ></PageTip>
        </div>
        <Nothing v-if="haveorno == 0">
          <template #texttip>没有找到相关内容</template>
          <template #imgtip><img src="./../../assets/img/noanysearch.png" alt=""></template>
        </Nothing>
      </scroll>
    </div>
</template>

<script>
import Nothing from './../MyDiscount/components/Nothing'
import ExtensionOrderList from './components/ExtensionOrderList'
import {getSpreadOrderList} from '@/api/fetch'
import Scroll from "@/components/Scroll"
import PageTip from "./../MoreBoom/components/PageTip"

export default {
  name: 'ExtensionOrder',
  data () {
    return {
      page:1,
      tipshow:1,
      pullup:true,
      pulldown:true,
      haveorno: 1,
      searchtxt: '',
      extensionorderlist: [

      ]
    }
  },
  watch: {
    'searchtxt': function (e) {
      if (e == '') {
        this.haveorno = 1
        this.getSpreadOrderList(1)
      }
    }
  },
  methods: {
    search () {
      this.getSpreadOrderList(1).then(res=>{
        if (res.data.length > 0) {
          this.haveorno = 1
          this.extensionorderlist = res.data
        } else {
          this.haveorno = 0
        }
      })
    },

    loadData(){
      this.getSpreadOrderList(1).then( res=>{
        this.tipshow = 1
        if (res.errcode == 0) {
          if (res.data.length > 0) {
            this.haveorno = 1
            this.extensionorderlist = res.data
          } else {
            this.haveorno = 0
          }
        }
      })
    },
    nextpage(){
      this.page= this.page + 1
      this.getSpreadOrderList(this.page).then( res=>{
        if (res.errcode == 0) {
          if(res.data.length > 0){
            this.extensionorderlist = this.extensionorderlist.concat(res.data)
          }else {
            this.page=this.page-1
            this.tipshow = 0
          }
        }
      })
    },

    async getSpreadOrderList (thepage) {
      const res = await getSpreadOrderList({
        page: thepage,
        keyword: this.searchtxt
      })
      console.log(res)
      return  res
    }
  },
  components: {
    Nothing,
    ExtensionOrderList,
    Scroll,
    PageTip
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
  .wrapper{
    height: 100%;
    overflow: hidden;
  }
  .extensionorder{
    .h100();
    .accorder_input{
      line-height: 30px;
      width: 100%;
      height: 70px;
      border-bottom: 5px solid #f4f4f4;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      input{
        width: 75%;
        margin-right: 10px;
        border:none;
        border-radius: 8px;
        height: 30px;
        color: #acacac;
        background: #f4f4f4;
        padding-left: 20px;
        font-size: 15px;
      }
      span{
        font-weight: 600;
        font-size: 16px;
      }
    }
  }

</style>
